﻿<template>
    <div>
        <vxe-modal v-model="showTable" title="绘制表格" width="1300" height="700" resize destroy-on-close :show-close="true" esc-closable @close="showTable = false">
            <el-tabs ref="eltabs" v-model="activeTab" type="card" :editable="canEdit" @edit="handleTabsEdit" @tab-click="newTabClick" :before-leave="beforeLeave">
                <el-tab-pane v-for="(item, index) in editableTabs" :label="item.title" :key="item.sortNum" :name="item.sortNum">
                    <template v-slot>
                        <vxe-grid id="item.sortNum"
                                  class="sortable-vxe-table"
                                  ref="item.sortNum"
                                  :loading="loadingTable"
                                  border
                                  resizable
                                  show-overflow
                                  keep-source
                                  highlight-hover-row
                                  :columns="item.context.tableColumn2"
                                  :height="tableH-400"
                                  align="center"
                                  :row-config="{ useKey: true }"
                                  :print-config="{}"
                                  :import-config="{}"
                                  :export-config="{}"
                                  :toolbar-config="tableToolbar2"
                                  :custom-config="{storage: true}"
                                  :edit-config="editConfig2"
                                  :scroll-y="{ enabled: false }"
                                  :menu-config="menuConfig2"
                                  @menu-click="menuClick2"
                                  :data="item.context.tableData2">
                            <template v-slot:toolbar_buttons>
                                <div class="tableToolbar">
                                    <el-tooltip :content="toolTipColumn" placement="bottom" effect="light">
                                        <el-button size="mini" type="primary" :disabled="item.context.vehicleOptions.length === 0  || !canEdit" @click="addLine(item)">增加行</el-button>
                                    </el-tooltip>
                                    <el-tooltip :content="toolTipColumn2" placement="bottom" effect="light">
                                        <el-button size="mini" type="primary" style="margin-left:10px" :disabled="!canEdit" @click="addList(item)">增加列</el-button>
                                    </el-tooltip>
                                    <el-button size="mini" type="primary" style="margin-left:10px" :disabled="item.context.vehicleOptions.length === 0 || !canEdit" @click="editList(item)">修改列头</el-button>
                                    <el-button size="mini" type="primary" style="margin-left:10px" :disabled="!canEdit" @click="changeTableName(item)">修改表名</el-button>
                                    <el-tooltip :content="toolTipColumn3" placement="bottom" effect="light">
                                        <el-button size="mini" type="success" style="margin-left:10px" :disabled="item.context.vehicleOptions.length === 0 || item.context.tableData2.length === 0 || !canEdit" @click="saveTable(item)">全部保存</el-button>
                                    </el-tooltip>
                                    <el-button size="mini" type="danger" style="margin-left: 10px; margin-right: 10px" :disabled="item.context.vehicleOptions.length === 0 || !canEdit" @click="delList(item)">删除列</el-button>
                                    <el-tooltip content="拖动表格顺序与删除表格后都会保存当前全部表数据" placement="bottom" effect="light">
                                        <i class="iconfont icon-tishi marginL6 elBlue pointer" />
                                    </el-tooltip>
                                </div>
                            </template>
                            <template #operate="{ row }">
                                <el-link type="danger" class="elLinkBTN" :disabled="!canEdit" @click="deleteLine(row)">删除</el-link>
                            </template>
                            <template #edit="{ row }" v-for="config in item.context.tableColumn2">
                                <el-input v-model="row[config.field]" placeholder="" type="text"></el-input>
                            </template>
                        </vxe-grid>
                    </template>
                </el-tab-pane>
            </el-tabs>

        </vxe-modal>
        <vxe-modal v-model="showOperation" title="请输入要新增列的标题" width="300" resize destroy-on-close :show-close="true" esc-closable @close="closeOperation">
            <template #default>
                <el-input v-model="showTitle" placeholder="请输入列头名称" size="mini" style="margin:10px 0" type="text"></el-input>
                <div style="text-align:right">
                    <el-button size="mini" @click="closeOperation">取 消</el-button>
                    <el-button size="mini" type="primary" :disabled='!showTitle' @click="saveOperation">确 定</el-button>
                </div>
            </template>
        </vxe-modal>
        <vxe-modal v-model="showDelColumn" title="请选择要删除的列" width="500" resize destroy-on-close :show-close="true" esc-closable @close="closeDelColumn">
            <template #default>
                <el-checkbox-group v-model="checkRadio">
                    <el-checkbox v-for="item in vehicleOptions" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
                </el-checkbox-group>
                <div style="text-align:right">
                    <el-button size="mini" @click="closeDelColumn">取 消</el-button>
                    <el-button size="mini" type="primary" :disabled='checkRadio.length === 0' checkRadio @click="removeColumn">确 定</el-button>
                </div>
            </template>
        </vxe-modal>
        <vxe-modal v-model="showEditColumn" title="修改列头" width="500" height="180" resize destroy-on-close :show-close="true" esc-closable @close="closeEditColumn">
            <template #default>
                <div>
                    <el-radio-group v-model="radio" @change="selectTitle()">
                        <el-radio v-for="item in vehicleOptions" :label="item.value.key" :key="item.value.key">{{item.label}}</el-radio>
                    </el-radio-group>
                </div>
                <div style="margin-top: 10px;">
                    <div style="display: inline;">列头修改为：</div>
                    <el-input style="width:40%" v-model="msgTitle" :disabled="!radio" size="mini" placeholder="请输入" />
                </div>
                <div style="text-align: right; margin-top: 15px;">
                    <el-button size="mini" @click="closeEditColumn">取 消</el-button>
                    <el-button size="mini" type="primary" :disabled='!msgTitle' checkRadio @click="editColumn">确 定</el-button>
                </div>
            </template>
        </vxe-modal>
        <el-dialog v-dialogDrag title="请选择表格插入的位置" :visible.sync="showAddTabDialog" width="600px" append-to-body :close-on-click-modal="false">
            <el-radio-group v-model="checkedPosition" :min="1" @change="checkedChange()">
                <el-radio v-for="item in allTabOption" :label="item.value" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
            <div v-if="showSelect" style="font-weight: 600;margin: 10px 0;">将插入到  {{checkedPosition == -1 ?  checkedOptionLabel : checkedOptionLabel + '  后面'}} </div>
            <div v-if="showSelect" style="display:inline;" class="tableToolbarText">标题：</div>
            <el-input v-if="showSelect" style="width:40%" type="text" placeholder="请输入插入表格的标题" v-model="tabTitle"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAddTabDialog = false;showSelect = false;checkedPosition = '';tabTitle = '';checkedOptionLabel = null">取 消</el-button>
                <el-button type="primary" @click="insertOption">确 定</el-button>
            </span>
        </el-dialog>
        <vxe-modal v-model="showTableName" title="修改表名" width="500" height="180" resize destroy-on-close :show-close="true" esc-closable @close="closeEditTable">
            <template #default>
                <div style="margin-top: 10px;">
                    <div style="display: inline;">表名修改为：</div>
                    <el-input style="width:40%" v-model="tableNameInfo.title" size="mini" placeholder="请输入" />
                </div>
                <div style="text-align: right; margin-top: 15px;">
                    <el-button size="mini" @click="closeEditTable">取 消</el-button>
                    <el-button size="mini" type="primary" @click="changeTable">确 定</el-button>
                </div>
            </template>
        </vxe-modal>
    </div>
</template>

<script>
    import organizationtree from '../OrganizationTree/index.vue';
    import treeFleetAPI from '../../request/MaintData/TreeFleet.js';
    import shipAPI from '../../request/MaintData/ShipAPI.js';
    import treeTypeJson from '../../common/json/treeOption.js';
    export default {
        components: { organizationtree },
        props: {
            context: { type: String, default: '' },
            rowInfo: { type: Object, default: {} },
            canEdit: { type: Boolean, default: false },
        },
        data() {
            return {
                showTable: false,
                activeTab: 1,
                editableTabs: [],
                loadingTable: false,
                tableH: window.innerHeight,
                tableToolbar2: {
                    refresh: false,
                    import: false,
                    export: false,
                    print: false,
                    custom: false,
                    slots: {
                        buttons: 'toolbar_buttons'
                    }
                },
                tableColumn2: [],
                tableData2: [],
                editConfig2: {
                    enabled: true,
                    trigger: 'click',
                    mode: 'row',
                    showStatus: false
                },
                menuConfig2: {
                    enabled: true,
                    header: {
                        disabled: false,
                        trigger: 'default',
                        options: [
                            [
                                { name: '在左侧插入列', code: 'left', prefixIcon: 'el-icon-arrow-left' },
                                { name: '在右侧插入列', code: 'right', prefixIcon: 'el-icon-arrow-right' },
                            ],
                        ]
                    },
                    body: {
                        disabled: false,
                        trigger: 'default',
                        options: [
                            [
                                { name: '在上方插入行', code: 'above', prefixIcon: 'el-icon-arrow-up' },
                                { name: '在下方插入行', code: 'below', prefixIcon: 'el-icon-arrow-down' },
                            ],
                        ]
                    },
                    visibleMethod: this.setVisibleMethod
                },
                toolTipColumn: '增加行到最底部',
                toolTipColumn2: '增加列到最右侧',
                toolTipColumn3: '保存所有表格数据',
                showOperation: false,
                showTitle: null,
                showDelColumn: false,
                checkRadio: [],
                vehicleOptions: [],
                showEditColumn: false,
                radio: null,
                msgTitle: '',
                showAddTabDialog: false,
                checkedPosition: null,
                allTabOption: [],
                showSelect: false,
                tabTitle: null,
                checkedOptionLabel: null,
                nowSelectedItem: {},
                showTableName: false,
                tableNameInfo: {},
                nowContext:'',
            };
        },
        mounted() {
            //this.getOrgData();
            var _this = this;
            window.onresize = () => {
                return (() => {
                    _this.cardBodyH = window.innerHeight - 434;
                    _this.setWidth();
                })();
            };
        },
        beforeDestroy() {
            window.onresize = null;
        },
        methods: {
            show(data,context) {
                this.rowTable = [];
                if (!this.canEdit) {
                    this.menuConfig2.enabled = false;
                    this.editConfig2.enabled = false;
                } else {
                    this.menuConfig2.enabled = true;
                    this.editConfig2.enabled = true;
                };
                this.vehicleOptions = [];
                this.allTabOption = [{ "label": "首项", "value": -1 }];
                this.tableColumn2 = [
                    { key: 1, type: 'seq', width: 50, fixed: null, title: '/' },
                    { key: 2, title: '操作', fixed: 'right', width: 100, slots: { default: 'operate' } }
                ];
                this.tableData2 = [];
                this.rowTable = data;
                this.nowContext = context;
                this.showTable = true;
                this.editableTabs = [];
                if (this.rowTable[context]) {
                    console.log(JSON.parse(this.rowTable[context]))
                    this.editableTabs = JSON.parse(this.rowTable[context]);
                    if (this.editableTabs.length > 0) {
                        this.editableTabs.forEach((x, i) => {
                            x.sortNum = i + 1;
                            this.allTabOption.push({ "label": x.title, "value": x.sortNum });
                        });
                        this.activeTab = 1;
                        this.nowSelectedItem = this.editableTabs[0];
                    }
                };
                this.initRowDrop();
            },
            initRowDrop() {
                this.$nextTick(() => {
                    const tabs = this.$refs.eltabs.$el.querySelector('.el-tabs__nav');
                    this.sortable1 = Sortable.create(tabs, {
                        handle: '.el-tabs__item',
                        animation: 150,
                        onEnd: ({ newIndex, oldIndex }) => {
                            if (newIndex === oldIndex) {
                                return;
                            };
                            var test = [];
                            test = this.editableTabs[this.activeTab - 1];
                            const currRow = this.editableTabs.splice(oldIndex, 1)[0];
                            this.editableTabs.splice(newIndex, 0, currRow);

                            this.editableTabs.forEach((x, i) => {
                                if (x.sortNum === test.sortNum) {
                                    this.activeTab = i + 1;
                                    return;
                                }
                            });
                            this.saveTable();
                            //if (test.context === this.testContext) {
                            //    this.saveDrag(this.editableTabs);
                            //} else {
                            //    test.context = this.testContext;
                            //    workCardChiefAPI.update(test).then(res => {
                            //        this.saveDrag(this.editableTabs);
                            //    }).catch(err => {
                            //    });
                            //}
                        }
                    });
                });
            },
            newTabClick(tab, event) {
                this.nowSelectedItem = this.editableTabs[tab.index];
            },
            handleTabsEdit(targetName, action) {
                console.log(targetName, action)
                if (action === 'add') {
                    this.showAddTabDialog = true;
                }
                if (action === 'remove') {
                    this.$confirm(`是否删除第${targetName}张表?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let tabs = this.editableTabs;
                        let activeName = this.activeTab;
                        if (targetName === this.nowSelectedItem.sortNum) {
                            this.activeTab = targetName - 1;
                        };
                        this.editableTabs.splice(targetName - 1, 1);
                        this.saveTable();
                    }).catch(() => { })
                }
            },
            beforeLeave(activeName, oldActiveName) {
                //var list = [];
                //if (activeName === '0') {
                //    return true;
                //};
                //if (this.isEndDel) {
                //    return true;
                //}
                //list = this.editableTabs[this.activeTab - 1];
                //if (this.testContext !== list.context) {
                //    this.isTrue = false;
                //    this.$message({ type: 'warning', message: '请先保存当前页内容!' });
                //    return false;
                //} else {
                //    this.isTrue = true;
                //    return true;
                //};
            },
            menuClick2({ menu, row, rowIndex, column, columnIndex }) {
                if (!column.title || column.title === '操作') {
                    return
                };
                switch (menu.code) {
                    case 'above':
                        this.saveAddLine(row, true, rowIndex);
                        break;
                    case 'below':
                        this.saveAddLine(row, false, rowIndex);
                        break;
                    case 'left':
                        this.showOperationList('left', columnIndex);
                        break;
                    case 'right':
                        this.showOperationList('right', columnIndex);
                        break;
                };
            },
            changeTableName(row) {
                this.showTableName = true;
                this.tableNameInfo = JSON.parse(JSON.stringify(row));
            },
            changeTable() {
                this.allTabOption = [];
                console.log(this.editableTabs, this.tableNameInfo);
                this.showTableName = false;
                this.editableTabs.find(y => y.sortNum === this.tableNameInfo.sortNum).title = this.tableNameInfo.title;
                this.editableTabs.forEach((x, i) => {
                    x.sortNum = i + 1;
                    this.allTabOption.push({ "label": x.title, "value": x.sortNum });
                });
            },
            closeEditTable() {
                this.showTableName = false;
                this.tableNameInfo = {};
            },
            checkedChange() {
                this.showSelect = true;
                this.allTabOption.forEach(x => {
                    if (x.value === this.checkedPosition) {
                        this.checkedOptionLabel = x.label
                    }
                });
            },
            insertOption() {
                var data = {};
                if (!this.checkedPosition) {
                    this.$message({ type: 'warning', message: '请选择表格要插入的位置!' });
                    return;
                };
                if (!this.tabTitle) {
                    this.$message({ type: 'warning', message: '请输入将要插入表格的标题!' });
                    return;
                };
                this.allTabOption = [{ "label": "首项", "value": -1 }];
                if (this.checkedPosition === -1) {
                    data = {
                        title: this.tabTitle,
                        sortNum: 1,
                        context: { tableColumn2: this.tableColumn2, vehicleOptions: [], tableData2: [] }
                    };
                    this.editableTabs.unshift(data);
                    if (this.editableTabs.length === 1) {
                        this.activeTab = 1;
                    } else {
                        this.activeTab = this.activeTab + 1;
                    }
                } else {
                    console.log(this.checkedPosition);
                    //let newTabName = 0;
                    //this.editableTabs.forEach(x => {
                    //    if (x.sortNum == this.checkedPosition) {
                    //        newTabName = x.sortNum+1;
                    //    }
                    //})
                    data = {
                        title: this.tabTitle,
                        context: { tableColumn2: this.tableColumn2, vehicleOptions: [], tableData2: [] },
                        sortNum: this.checkedPosition + 1,
                    };
                    this.editableTabs.splice(this.checkedPosition, 0, data);
                    if (this.activeTab > this.checkedPosition) {
                        this.activeTab = this.activeTab + 1;
                    }
                };
                this.editableTabs.forEach((x, i) => {
                    x.sortNum = i + 1;
                    this.allTabOption.push({ "label": x.title, "value": x.sortNum });
                });
                this.nowSelectedItem = this.editableTabs[this.activeTab - 1];
                this.showSelect = false;
                this.checkedPosition = '';
                this.tabTitle = ''
                this.checkedOptionLabel = null;
                this.showAddTabDialog = false;
                //this.showDialog = false;
                //this.TabLoading = true;
                //var test = [];
                //test = this.editableTabs[this.activeTab - 1];
                //if (test.context === this.testContext) {
                //    workCardChiefAPI.create(data).then(res => {
                //        this.saveDrag(this.editableTabs);
                //    }).catch(err => {
                //        this.$message({ type: 'error', message: '插入失败!' });
                //    });
                //} else {
                //    test.context = this.testContext;
                //    workCardChiefAPI.update(test).then(res => {
                //        workCardChiefAPI.create(data).then(res => {
                //            this.saveDrag(this.editableTabs);
                //        }).catch(err => {
                //            this.$message({ type: 'error', message: '插入失败!' });
                //        });
                //    }).catch(err => {
                //    });
                //}
            },
            //设置表格右键菜单显示
            setVisibleMethod({ type, options, column }) {
                if (!column) {
                    return false
                };
                if (type === 'header' && column.title === '操作' || type === 'header' && column.title === '/') {
                    return false
                } else {
                    return true
                }
            },
            // 增加一行
            addLine(item) {
                this.saveAddLine();
            },
            saveAddLine(row, up, rowIndex) {
                var data = {};
                var item = JSON.parse(JSON.stringify(this.editableTabs[this.nowSelectedItem.sortNum - 1]));
                item.context.tableColumn2.forEach((x, i) => {
                    if (!!x.field) {
                        data[x.field] = '';
                    }
                });
                data.newRowId = nanoid(12);
                if (!!row) {
                    up ? item.context.tableData2.splice(rowIndex, 0, data) : item.context.tableData2.splice(rowIndex + 1, 0, data);
                } else {
                    item.context.tableData2.push(data);
                };
                this.editableTabs[this.nowSelectedItem.sortNum - 1] = item;
                this.$forceUpdate();
            },
            // 删除一行
            deleteLine(row) {
                var title = `是否删除当前行`;
                this.$confirm(title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data = JSON.parse(JSON.stringify(this.editableTabs[this.nowSelectedItem.sortNum - 1]));
                    data.context.tableData2.splice(data.context.tableData2.findIndex(z => z.newRowId === row.newRowId), 1);
                    this.editableTabs[this.nowSelectedItem.sortNum - 1] = data;
                    this.$forceUpdate();
                }).catch(() => { });
            },
            // 删除列
            delList(row) {
                this.showDelColumn = true;
                this.vehicleOptions = this.editableTabs[this.nowSelectedItem.sortNum - 1].context.vehicleOptions;
            },
            removeColumn() {
                var data = JSON.parse(JSON.stringify(this.editableTabs[this.nowSelectedItem.sortNum - 1]));
                this.checkRadio.forEach(row => {
                    data.context.vehicleOptions.forEach((x, i) => {
                        if (x.value.field === row.field) {
                            data.context.vehicleOptions.splice(i, 1);
                        }
                    });
                    data.context.tableColumn2.splice(data.context.tableColumn2.findIndex(z => z.key === row.key), 1);
                    data.context.tableData2.map(y => {
                        delete y[row.field];
                        return;
                    });
                });
                this.editableTabs[this.nowSelectedItem.sortNum - 1] = data;
                this.$forceUpdate();
                this.checkRadio = [];
                this.showDelColumn = false;
            },
            // 删除整张表
            delAll(item) {
                this.$confirm(`删除后数据无法恢复,是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.nowSelectedItem.context.tableData2 = [];
                    this.nowSelectedItem.context.tableColumn2 = [];
                    this.saveTable();
                }).catch(() => {
                });
            },
            closeDelColumn() {
                this.checkRadio = [];
                this.showDelColumn = false;
            },
            //修改列头
            editList(row) {
                this.showEditColumn = true;
                this.vehicleOptions = this.editableTabs[this.nowSelectedItem.sortNum - 1].context.vehicleOptions;
            },
            editColumn() {
                var data = JSON.parse(JSON.stringify(this.editableTabs[this.nowSelectedItem.sortNum - 1]));
                //this.vehicleOptions.map(x => {
                //    if (x.value.key === this.radio) {
                //        x.value.title = this.msgTitle;
                //    };
                //    return x;
                //});
                data.context.tableColumn2.find(y => y.key === this.radio).title = this.msgTitle;
                data.context.vehicleOptions.find(z => z.value.key === this.radio).label = this.msgTitle;
                this.editableTabs[this.nowSelectedItem.sortNum - 1] = data;
                this.$forceUpdate();
                this.radio = null;
                this.msgTitle = '';
                this.showEditColumn = false;

                //this.saveTable();//保存数据时表头与表格内容放在不同的字段里,
                //tableColumn2是实时的表数据与vehicleOptions对应, 修改完之后直接保存即可, 无论删除还是新增都不影响.
            },
            // 增加列
            addList(item) {
                this.showTitle = null;
                this.showOperation = true;
            },
            saveOperation() {
                var data = JSON.parse(JSON.stringify(this.editableTabs[this.nowSelectedItem.sortNum - 1]));
                var list = {
                    key: nanoid(12),
                    field: 'Col' + nanoid(12),
                    title: this.showTitle,
                    width: 200,
                    editRender: { name: 'input' },
                };
                if (data.context.tableData2.length > 0) {
                    data.context.tableData2.map(x => {
                        x[list.field] = '';
                        return;
                    });
                };
                if (this.position === 'left') {
                    data.context.tableColumn2.splice(this.listIndex, 0, list);
                    data.context.vehicleOptions.splice(this.listIndex - 1, 0, { value: list, label: list.title });
                } else if (this.position === 'right') {
                    data.context.tableColumn2.splice(this.listIndex + 1, 0, list);
                    data.context.vehicleOptions.splice(this.listIndex, 0, { value: list, label: list.title });
                } else {
                    data.context.tableColumn2.splice(data.context.tableColumn2.length - 1, 0, list);
                    data.context.vehicleOptions.push({ value: list, label: list.title });
                };
                this.editableTabs[this.nowSelectedItem.sortNum - 1] = data;
                this.showOperation = false;
                this.showTitle = null;
                this.position = null;
                this.listIndex = null;
            },
            showOperationList(position, listIndex) {
                this.showTitle = null;
                this.showOperation = true;
                this.position = position;
                this.listIndex = listIndex;
            },
            //menuClick2({ menu, row, rowIndex, column, columnIndex }) {
            //    if (!column.title || column.title === '操作') {
            //        return
            //    };
            //    switch (menu.code) {
            //        case 'above':
            //            this.saveAddLine(row, true, rowIndex);
            //            break;
            //        case 'below':
            //            this.saveAddLine(row, false, rowIndex);
            //            break;
            //        case 'left':
            //            this.showOperationList('left', columnIndex);
            //            break;
            //        case 'right':
            //            this.showOperationList('right', columnIndex);
            //            break;
            //    };
            //},
            closeOperation() {
                this.showTitle = null;
                this.showOperation = false;
                this.position = null;
                this.listIndex = null;
            },
            saveTable() {
                this.rowTable[this.nowContext] = JSON.stringify(this.editableTabs);
                if (this.editableTabs.length === 0) {
                    this.rowTable[this.nowContext] = '';
                };
                this.$emit('editOver', this.rowTable);
                //this.loadingTable = true;
                //testSchDetailsAPI.update(this.rowTable).then(res => {
                //    if (!res) {
                //        this.loadingTable = false;
                //        this.$message({ type: 'warning', message: '操作失败' });
                //        return
                //    } else {
                //        this.$message({ type: 'success', message: '操作成功' });
                //        this.showTableList(this.rowTable);
                //        this.getTestSchDetails();
                //        this.setTableColumn();
                //        this.loadingTable = false;
                //    }
                //}).catch(() => {
                //    this.loadingTable = false;
                //});

            },
            
            closeEditColumn() {
                this.radio = null;
                this.msgTitle = '';
                this.showEditColumn = false;
            },
            selectTitle(row) {
            },



            fx() {
                var t = [];
                var f = [];
                this.allShip.filter(item => {
                    var has = this.selectShips.findIndex(e => e.shipID === item.shipID);
                    if (has === -1) {
                        t.push(item);
                        this.selectShips.push(item);
                    } else {
                        f.push(item);
                        this.selectShips.splice(has, 1);
                    }
                });
                this.$refs.xGrid.setCheckboxRow(t, true);
                this.$refs.xGrid.setCheckboxRow(f, false);
            },

            save() {
                console.log(this.selectShips)
                if (this.multiple) {
                    if (this.selectShips.length === 0) {
                        this.$message({ type: 'warning', message: '未选择船只!' });
                        return
                    };
                } else {
                    if (!this.selectShips.shipID) {
                        this.$message({ type: 'warning', message: '未选择船只!' });
                        return
                    };
                };
                this.$emit('selected', this.selectShips);
                this.showSelectShip = false;
            },

            setWidth() {
                this.dialogWidth = window.innerWidth < 1100 ? (window.innerWidth - 30) + 'px' : '1100px';
            },

            format(ops, op, hasops) {
                var val = null;
                if (hasops) {
                  var options = _(ops).map(e => { return e.options }).flatMap().valueOf();
                  val = options.find(e => e.value === op);
                } else {
                  val = ops.find(e => e.value === op);
                };
                return val ? val.label : '';
            }
        },
        template: '#template'
    };
</script>
